<template>
  <div class="roomInformation">
    <panel @add="addUser"></panel>
    <addAppointment :dialogFormVisible="showAddDialog" @closeDialog="showAddDialog=false" @refresh="refresh" :addTemp="{...addTemp}" :urlTemp="urlTemp"></addAppointment>
    <roomList
      :roomList="roomList"
      class="list"
      @change="change($event); dialogFormVisible = true"
      @toPhotoList="getPhoto($event);showPhotoList = true"
      @refresh="refresh"
    ></roomList>
    <roomUpdate
      :dialogFormVisible="dialogFormVisible"
      @closeDialog="dialogFormVisible = false"
      :toChangeRow="toChangeRow"
      @refresh="refresh"
    ></roomUpdate>
    <roomImagemin
      :dialogTableVisible="showPhotoList"
      :photoList="photoList"
      @closeDialog="showPhotoList=false"
      @refreshaPhoto="getPhoto($event)"
    ></roomImagemin>
  </div>
</template>

<script>
import roomList from "@/components/room/roomList";
import roomUpdate from "@/components/room/roomUpdate";
import roomImagemin from "../../components/room/roomImagemin";
import panel from "@/components/room/addroombutton";
import addAppointment from '@/components/room/addroom';
export default {
  name: "roomInformation",
  data() {
    return {
      roomList: [],
      page_now: undefined,
      total: undefined,
      page_num: undefined,
      toChangeIndex: undefined,
      dialogFormVisible: false,
      showAddDialog: false,
      toChangeRow: null,
      searchVal: "",
      showPhotoList: false,
      photoList: null,
      addTemp: {
        type: "",
        stock: "",
        price: "",
        status: ""
      },
      urlTemp: {}
    };
  },
  components: {
    roomList,
    panel,
    roomUpdate,
    roomImagemin,
    addAppointment
  },
  methods: {
    addUser: function() {
      this.showAddDialog = true;
      this.urlTemp = { ...this.urlTemp };
    },
    change: function(index) {
      console.log(index);
      this.toChangeRow = this.roomList[index];
    },
    getPhoto: async function(row) {
      let data = await this._axios
        .get(`/ycw/rooms/getImage?item_id=${row.id}`)
        // .get(`/ycw/rooms/getImage`)
        .then(data => data.data.data);
      console.log(data);console.log(row.id,85146);
      this.photoList = {
        id: row.id,
        name: row.title,
        list: data
      };
    },
    refresh: async function() {
      let data = await this._axios
        .get("/api/rooms/getRoom")
        .then(data => data.data.data);
      this.roomList = data;
    }
  },
  mounted: async function() {
    this.refresh();
  }
};
</script>

<style lang="scss" scoped>
.pagination {
  margin-top: 20px;
}
</style>
